<!--
 * @Description: 通知列表
 * @Author: Kerwin
 * @Date: 2025-07-03 09:34:28
 * @LastEditTime: 2025-07-03 14:40:37
 * @LastEditors:  Please set LastEditors
-->

<template>
  <view class="notice">
    <view
      class="noticeList"
      @click="goDetail(item)"
      v-for="item in noticeList"
      :key="item.id"
    >
      <view class="titleBox">
        <view class="title">
          <view>{{ item.title }}</view>
          <view class="dot" v-if="!item.isRead"> </view>
        </view>
        <view class="subtitle">{{ item.subtitle }}</view>
      </view>
      <view class="noticeTime">
        <u-cell-group>
          <u-cell-item
            :title="dateFormat(new Date(item?.noticeTime * 1000), 'yyyy-MM-dd')"
            value="查看详情"
          >
          </u-cell-item>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
//api
import { baseApi } from '@/api'
//工具
import { dateFormat } from '@/utils'

const noticeList = ref([])
const integralsRuleId = ref(null)

// onMounted(() => {
//   getNoticeList()
// })
// 获取通知列表
async function getNoticeList() {
  const { data } = await baseApi.getNotifceist({ detail: true, noPaging: true ,integralsRuleId:integralsRuleId.value })
  noticeList.value = data.filter((item:any) => item.status === 1)
  console.log(noticeList.value)
}
//通知已读
async function noticeRead(id: any) {
  await baseApi.getNoticeRead({ noticeId: id })

}
//通知详情
const goDetail = (item: any) => {

  if(!item.isRead) {
    //已读
    noticeRead(item.id)
  }

  uni.navigateTo({
    url: '/pages/notice/detail?id=' + item.id
  })
}

onLoad((option: any) => {
  if( option) {
    integralsRuleId.value = option.id
  getNoticeList()
  }
})
</script>

<style lang="scss" scoped>
.notice {
  padding: 20rpx;
  .noticeList {
    margin: 20rpx 0;
    border-radius: 10rpx;
    background-color: #fff;
    .titleBox {
      padding: 10rpx 20rpx;
      .title {
        margin-top: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 30rpx;
        font-weight: 600;
        margin-bottom: 30rpx;

        .dot {
          width: 20rpx;
          height: 20rpx;
          background-color: red;
          border-radius: 50%;
        }
      }

      .subtitle {
        font-size: 26rpx;
      }
    }
  }
}
:deep(.u-cell_title[data-v-f6be5641]) {
  font-size: 24rpx !important;
}
:deep(.u-cell__value[data-v-f6be5641]) {
  font-size: 24rpx !important;
}
:deep(.u-cell[data-v-f6be5641]) {
  font-size: 18rpx !important;
  padding: 15rpx;
}
</style>
